<template>
  <div class="app">
        <div class="title">校园超市</div>
        <p class="bt">手机号登录</p>
    <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="手机号"
      label="手机号"
      placeholder="请输入手机号"
      :rules="[{ required: true, message: '请填写手机号' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="请输入密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="warning" native-type="submit" >
      提交
    </van-button>
  </div>
</van-form>
  </div>
</template>

<script>
    import { ref } from 'vue';
    import {Login} from '../../api/login'
export default {
     setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      console.log('submit', values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
  data(){
    return{
      phone:'',
      password:''
    }
  },
  methods:{
    onSubmit(val){
      const {phone,password}=val;
      Login({phone:phone,password:password}).then(res=>{
        const{status,data}=res;
        console.log(data.token);
        if(status===200){
          localStorage.setItem("token",data.token);
          this.$router.push($router.push('../layout/home'))
        }else{
          console.log("手机号或者密码错误");
        }
      })
    }
  }
}
</script>

<style>
*{
    padding: 0;
    margin: 0
}
.title{
    font-size: 6rem;
    font-weight: 800;
    text-align: center;
}
.bt{
    font-size: 10rem;
    font-weight: 400;
    margin-top: 7rem;
    padding-left: 10rem;
    margin-bottom: 8rem;
}

</style>